<template>
    <div class="card-items">
        <div class="head-part">
            <div class="title">
                <img src="@/assets/van-img.png" alt="" />
                <span>{{dataItem.title}}</span>
            </div>
        </div>
        <div class="tab-btn">
            <span v-for="(item,index) in tabList" :key="index" @click="tabClick(index)" :class="tabIndex == index?'btn-select':'btn-unselect'">{{item.name}}</span>
        </div>
        <div class="desc-panel">
            <div class="left-desc">
                <span class="text1">当月</span>
                <span class="text2">{{dataItem.monthSatisfaction}}</span>
                <span class="text1">排名</span>
                <span class="text2">{{dataItem.ranking}}</span>
            </div>
            <div class="right-desc">环比<span style="color:#10CFA5">{{dataItem.hb}}</span></div>
        </div>

        <div class="tab-btns">
            <span v-for="(item,index) in tabList1" :key="index" @click="tabClick1(index)" :class="tabIndex1 == index?'btn-selects':'btn-unselects'">{{item.name}}</span>
        </div>
        <lineEcharts :chartObj="chartObj" :cindex="mindex" />
    </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue"
import lineEcharts from "@/components/lineEcharts.vue"
export default {
    components: {
        lineEcharts
    },
    setup(props) {
        const state = reactive({
            tabList: [{ name: "融合业务办理便捷性" }, { name: "满意度" }],
            tabList1: [
                { name: "趋势图(月)" },
                { name: "趋势图(日)" },
                { name: "地市排名" }
            ],
            tabIndex: 0,
            tabIndex1: 0,
            mindex: "10",
            showPopover: false,
            dataItem: {
                title: "营业厅",
                index: 4,
                monthSatisfaction: "99.46%",
                ranking: 10,
                hb: "+0.12%"
            },
            chartObj: {
                yAxisData: [213, 326, 430, 366, 330, 338, 240, 330, 466, 230],
                xAxisData: [
                    "10/01",
                    "10/02",
                    "10/03",
                    "10/04",
                    "10/05",
                    "10/06",
                    "10/07",
                    "10/08",
                    "10/09",
                    "10/10"
                ],
                title: "表现值",
                lineColor: "#10cfa6",
                areaClolor: "#c4f4ea"
            }
        })
        //一级tab切换
        function tabClick(val) {
            state.tabIndex = val
        }
        //二级tab切换
        function tabClick1(val) {
            state.tabIndex1 = val
            if (val == 0) {
                state.mindex = "10"
                state.chartObj = {
                    yAxisData: [
                        213, 326, 430, 366, 330, 338, 240, 330, 466, 230
                    ],
                    xAxisData: [
                        "10/01",
                        "10/02",
                        "10/03",
                        "10/04",
                        "10/05",
                        "10/06",
                        "10/07",
                        "10/08",
                        "10/09",
                        "10/10"
                    ],
                    title: "表现值",
                    lineColor: "#10cfa6",
                    areaClolor: "#c4f4ea"
                }
            } else if (val == 1) {
                state.mindex = "11"
                state.chartObj = {
                    yAxisData: [
                        113, 226, 330, 466, 530, 638, 700, 830, 466, 130
                    ],
                    xAxisData: [
                        "10/01",
                        "10/02",
                        "10/03",
                        "10/04",
                        "10/05",
                        "10/06",
                        "10/07",
                        "10/08",
                        "10/09",
                        "10/10"
                    ],
                    title: "表现值",
                    lineColor: "#10cfa6",
                    areaClolor: "#c4f4ea"
                }
            } else if (val == 2) {
                state.mindex = "12"
                state.chartObj = {
                    yAxisData: [
                        213, 326, 430, 366, 330, 338, 240, 330, 466, 230, 330,
                        466, 230
                    ],
                    xAxisData: [
                        "南京",
                        "泰州",
                        "无锡",
                        "南通",
                        "苏州",
                        "盐城",
                        "扬州",
                        "淮安",
                        "常州",
                        "宿迁",
                        "镇江",
                        "徐州",
                        "连云港"
                    ],
                    iscity: true,
                    title: "表现值",
                    lineColor: "#10cfa6",
                    areaClolor: "#c4f4ea"
                }
            }
        }
        onMounted(() => {
            state.chartObj = {
                yAxisData: [213, 326, 430, 366, 330, 338, 240, 330, 466, 230],
                xAxisData: [
                    "10/01",
                    "10/02",
                    "10/03",
                    "10/04",
                    "10/05",
                    "10/06",
                    "10/07",
                    "10/08",
                    "10/09",
                    "10/10"
                ],
                title: "表现值",
                lineColor: "#10cfa6",
                areaClolor: "#c4f4ea"
            }
        })
        return {
            ...toRefs(state),
            tabClick,
            tabClick1
        }
    }
}
</script>
<style lang="scss" scoped>
.card-items {
    width: 100%;
    height: 342px;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 0 2px 10px;
    margin-bottom: 10px;
}

.head-part {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .qs-text {
        padding: 0 15px;
        line-height: 24px;
        color: #666666;
        margin-right: 10px;
        font-size: 12px;
        background: #ffffff;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }
}
.title {
    width: 50%;
    display: flex;
    align-items: center;
    span {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
    }
}
.tab-btn {
    width: calc(100% - 8px);
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 8px 0 0 8px;
    overflow-x: auto;
    .btn-select {
        padding: 6px 13px;
        background: linear-gradient(285deg, #fe6800 0%, #ff9900 100%);
        border-radius: 12px;
        color: #ffffff;
        white-space: nowrap;
        font-size: 13px;
        margin-right: 4px;
    }
    .btn-unselect {
        padding: 6px 13px;
        background: #f3f3f3;
        border-radius: 12px;
        color: #333333;
        white-space: nowrap;
        font-size: 13px;
        margin-right: 4px;
    }
}

.tab-btns {
    width: calc(100% - 40px);
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 15px 20px 0 20px;
    background: #f3f3f3;
    border-radius: 4px;
    overflow-x: auto;
    .btn-selects {
        width: calc(100% / 3);
        padding: 6px 13px;
        text-align: center;
        background: linear-gradient(180deg, #fe6800 0%, #ff9900 100%);
        border-radius: 4px;
        color: #ffffff;
        white-space: nowrap;
        font-size: 13px;
    }
    .btn-unselects {
        width: calc(100% / 3);
        padding: 6px 13px;
        text-align: center;
        background: #f3f3f3;
        border-radius: 4px;
        color: #333333;
        white-space: nowrap;
        font-size: 13px;
    }
}
.desc-panel {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .left-desc {
        font-size: 14px;
        .text1 {
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            margin-right: 6px;
        }
        .text2 {
            font-size: 21px;
            font-weight: bold;
            color: #333333;
            margin-right: 6px;
        }
    }
    .right-desc {
        padding: 0 10px;
        height: 24px;
        line-height: 24px;
        margin-right: 10px;
        background: #fff0dc;
        color: #333333;
        border-radius: 4px;
        font-size: 12px;
        text-align: center;
    }
}
</style>